<template>
  <div>
    <div class="block">
      <div style="display: inline-block">
        <span style="margin-right: 10px" class="demonstration"
          >选择书院所在地区</span
        >
        <el-cascader
          style="margin-left: 10px,margin-right: 20px"
          v-model="option.children"
          :options="option"
          @change="handleChange"
        ></el-cascader>
      </div>

      <div style="display: inline-block">
        <span style="margin-left: 20px" class="demonstration"
          >选择想要的书院</span
        >
        <el-select
          style="margin-left: 10px"
          v-model="value"
          placeholder="请选择"
          @change="selectChange($event)"
        >
          <el-option
            v-for="item in academiesList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
          <el-pagination
            background
            :current-page="params.page"
            :page-size="params.pageSize"
            :page-sizes="[1, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-select>
      </div>
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
import { reqAreaList } from '@/api';
import { reqAcademiesList } from '@/api';
export default {
  data() {
    return {
      academiesList: [],
      params: {
        page: 1,
        pageSize: 10,
      },
      chooseValue: '',
      options: [],
      rangeNumber: 50,
      value: '',
      option: [],
      total: 1,
      area: '',
      province: '',
    };
  },

  methods: {
    selectChange(event) {
      // event 就是已选中的对象数组 , 这里是多选multiple，所以是数组
      // 与 selectionArr 是相同的
      this.$router.push('/profile/editProfile/?id=' + event);
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.loadA();
    },
    handleCurrentChange(val) {
      this.params.page = val;

      this.loadA();
    },

    handleChange(value) {
      this.area = value[0];
      this.province = value[1];
      this.params.page = 1;
      this.params.pageSize = 10;
      this.loadA();
    },
    async load() {
      let result = await reqAreaList();
      if (result.code === 1) {
        let res = result.data;
        let data = [];

        for (let i = 0; i < res.length; i++) {
          let obj = {
            label: '',
            value: '',
            children: [],
          };
          obj.label = res[i].area;
          obj.value = res[i].area;
          for (let j = 0; j < res[i].options.length; j++) {
            let objj = {
              label: '',
              value: '',
              // children: [],
            };
            objj.label = res[i].options[j].province;
            objj.value = res[i].options[j].province;
            obj.children.push(objj);
          }
          data.push(obj);
        }
        this.option = data;
      }
    },
    async loadA() {
      this.value = '';
      this.academiesList = [];
      // this.params.page = 1;
      let result = await reqAcademiesList(
        this.province,
        this.params.page,
        this.params.pageSize
      );
      if (result.code === 1) {
        let res = result.data.records;
        this.total = result.data.total;
        for (let i = 0; i < res.length; i++) {
          let obj = {
            label: '',
            value: '',
          };
          obj.label = res[i].academyName;
          obj.value = res[i].id;
          this.academiesList.push(obj);
        }
      }
    },
  },

  mounted() {
    this.load();
  },
};
</script>

<style lang="less" scoped>
.block {
  margin-left: 30px;
  margin-top: 30px;
}
</style>
